<template>
    <div>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showEdit('add')">发布</el-button>
          <el-button type="danger" @click="batchesDel">批量删除</el-button>
        </el-col>
      </el-row>
      <Table :columns="columns"
             :showPagination="true"
             :dataSource="articlesData"
             :fetch="loadArticlesList"
             :options="{selectType:'checkbox', extHeight:20, showIndex:true, border:true,}"
             @pageNoChange="handlePageNoChange"
             @rowSelected="handleRowSelected">
        <template #opration="{row}">
          <div class="opration">
            <a href="javascript:void(0)"
               class="a-link"
               @click="showEdit('update',row)">修改</a>
            <el-divider direction="vertical" />
            <a href="javascript:void(0)"
               class="a-link"
               @click="del(row)">删除</a>
          </div>
        </template>
      </Table>
      <articlesEdit ref="articleEditRef" @callback="loadArticlesList"></articlesEdit>
    </div>
  </template>
  
  <script>
import { getCurrentInstance } from 'vue';
import articlesEdit from './articlesEdit.vue';

  export default {
    components:{
      articlesEdit
    },
    data(){
      return{
        currentPage: 1,
        articleEditRef: null,
        selectedArticlesId:[],
        proxy: getCurrentInstance().proxy,
        userId:'',
        columns:[
        {
          label: "文章标题",
          prop: "title",
        },{
          label: "作者",
          prop: "authorName",
          width:200,
        },{
          label: "点赞量",
          prop: "support",
          width:100,
        },{
          label: "发布时间",
          prop: "created",
          width:200,
        },{
          label: "最后修改时间",
          prop: "modified",
          width:200,
        },{
          label: "操作",
          prop: "opration",
          width:200,
          scopedSlots: "opration",
        },],
        articlesData:{
          list:[]
        },
        dialogConfig: {
          show:false,
          title:"标题",
          buttons:[
            {
              type:"danger",
              text:"确定",
              click: (e) => {
                this.submitForm();
              },
            },
          ],
        },
      }
    },
    methods: {
      //加载数据
      async loadArticlesList(){
        try {
          let result = await this.proxy.Request({
            url: "/articles/currentUser",
            method: "GET",
            params:{
              token:'',
              page:this.currentPage,
            }
          });

          if (!result){
            return;
          }
          this.articlesData.list = result.data.rows;
        } catch(error){
          console.error("获取文章数据时出错：",error)
        }
      },

      //发布和修改文章
      showEdit(type, data){
        console.log(type);
        this.articleEditRef.init(type, data);
      },

      //删除文章
      del(data) {
        this.proxy.Confirm('你确定要删除该文章吗?', async() => {
          let result = await this.proxy.Request({
            url: '/articles/delete/'+data.id,
            method: "DELETE",
            params: {
              id: data.id,
            }
          })
          if (!result) {
            return;
          }
          this.loadArticlesList();
        })
      },

      //批量删除
      batchesDel() {
        if(this.selectedArticlesId != []){
          this.proxy.Confirm('你确定要删除这些文章吗?', async() => {
            let result = await this.proxy.Request({
              url: '/articles/delete/'+this.selectedArticlesId,
              method: "DELETE",
            })
            if (!result) {
              return;
            }
            this.loadArticlesList();
          })
        }else{
          this.proxy.Confirm('你还没选择要删除的文章')
        }
      },

      handlePageNoChange(pageNo){
        this.currentPage = pageNo;
        this.loadArticlesList();
      },

      handleRowSelected(selectedIds){
        this.selectedArticlesId = selectedIds;
        console.log(this.selectedArticlesId);
      },
    },
    mounted(){
      this.loadArticlesList();
      this.articleEditRef = this.$refs.articleEditRef;
    }
  }
  </script>
  
  <style>

  </style>